<template>
	<div class="SMcontract my-app">
		<h2 class="my-h2">商户信息 / 合同管理</h2>
		<div class="infoel-radio-type">
			<div class="btn-list">
				<el-button @click="lookcontract">
					<span class="iconfont icon-hetongchakan"></span>合同查看</el-button>
				<el-upload action="" :auto-upload="false" :on-change="coverchange" :file-list="fileList">
					<el-button size="small" type="primary">
						<span class="iconfont icon-shangchuan"></span>合同文件上传</el-button>
				</el-upload>
			</div>
			<div class="btn-list2">
				<el-button @click="getuploadContract">
					<span class="iconfont icon-xiazai"></span>
					合同模版下载</el-button>
			</div>
		</div>
		<div class="info-con">
			<img v-show="contractshow" :src="contract" />
		</div>
	</div>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				NavName: "商户注册  /  合同管理",
				fileList: [],
				contract: "",
				contractshow: false,
				tableData: [{
					ol: "1",
					name: "门票",
					num: "张",
					msjmoney: "600",
					hymoney: "560",
					jsjmoney: "560",
					text: "qdwqd"
				}, {
					ol: "1",
					name: "门票",
					num: "张",
					msjmoney: "600",
					hymoney: "560",
					jsjmoney: "560",
					text: "qdwqd"
				}, {
					ol: "1",
					name: "门票",
					num: "张",
					msjmoney: "600",
					hymoney: "560",
					jsjmoney: "560",
					text: "qdwqd"
				}, ]
			}
		},
		mounted() {

		},
		computed: {
			...mapGetters([
				"token",
			])
		},
		methods: {
			getuploadContract() {
				this.$api.uploadContract({})
			},
			lookcontract() {
				this.$api.uploadContractInfo({
						token: this.token
					})
					.then(res => {
						if(res.code===200){
						this.contract = 'https://www.ddmzj.com' + res.url;
						this.contractshow = true;}
						else{
							
								this.$alert(res.meg, '提示', { confirmButtonText: '确定', });
							
						}
						
					})
				// }
			},
			coverchange(file, fileList) {
				var _this = this;
				var windowURL = window.URL || window.webkitURL;
				_this.param = new FormData();
				_this.param.append('images', file.raw, file.name);
				_this.$api.uploadContractup(_this.param, _this.token, function(data) {
					this.$alert(data.meg, '提示', { confirmButtonText: '确定', });

				});
			},
		},
	}
</script>

<style lang="less">
	.SMcontract {
		.infoel-radio-type {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px 50px;
			box-sizing: border-box;
			font-size: 16px;

			.btn-list {
				display: flex;
				height: 100px;
			}

			.btn-list2 {
				height: 100px;

				.el-button {

					background: #e0a312
				}
			}

			.el-button {
				border: none;
				width: 158px;
				height: 30px;
				padding: 0;
				line-height: 30px;
				margin: 0 20px;
				background: #11bcd5;
				color: #fff;

			}

			.title {
				padding-right: 20px;
				box-sizing: border-box;
			}
		}

		.info-con {
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			border-bottom: 0;

			img {
				max-width: 100%;
			}

			.tit {
				display: block;
				padding: 15px 0;
				box-sizing: border-box;
			}

			.row {
				.st-box {
					padding: 10px 0;
					box-sizing: border-box;
					text-align: left;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.solt-tit {
						width: 100%;
						text-align: left;
						font-weight: bold;
						font-size: 16px;
						color: #fff;
						padding: 5px 8px;
						box-sizing: border-box;
						background: #00ccff
					}

					.time {
						span {
							padding: 0 10px;
							box-sizing: border-box;
						}
					}
				}

				.body-bor {
					width: 857px;

					.el-table td,
					.el-table th.is-leaf {
						text-align: center;
					}

					.el-table__header-wrapper thead tr .is-leaf {
						background: #999;
						color: #000;
					}

					.el-table--border,
					.el-table--group,
					.el-table--border td,
					.el-table--border th,
					.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
						border-color: #8b8b8b;
					}

					.el-table--border::after,
					.el-table--group::after,
					.el-table::before {
						display: none;
					}
				}
			}
		}
	}
</style>
